<script setup>
import { onMounted } from 'vue';

onMounted(() => {
	// 获取查询对象，后续通过它去检索元素
	const query = uni.createSelectorQuery();

	// 执行检索的方法,单个元素
	query.select('.box').boundingClientRect((res) => {
		console.log(res);
	});
	// 多个元素位置尺寸信息
	query.selectAll('.box').boundingClientRect((resList) => {
		console.log(resList);
	});
	// 设备的屏幕尺寸信息
	query.selectViewport().boundingClientRect((res) => {
		console.log(res);
	});
	// 执行查询exec（不执行这个，查询不了结果）
	query.exec();
});
</script>

<template>
	<view class="container">
		<view class="box">获取这个盒子的宽高、位置等信息</view>
		<view class="box box2">第二个盒子</view>
	</view>
</template>

<style lang="scss">
page {
	padding: 30rpx;
}

.box {
	width: 300rpx;
	height: 300rpx;
	margin-top: 40rpx;
	background-color: pink;
}
.box2 {
	background-color: skyblue;
}
</style>
